<template>
	<view class="page">
		<view class="page-bg">
			<image style="width: 100%; height: 100%" src="https://ai.mojudianzisw.com/static/img/shop/ai/bg1.png" mode=""></image>
		</view>

		<view class="view-history" @click="$navigateTo('/pages/history/index')">查看历史记录</view>

		<view class="box-bottom">
			<view class="cc-flex cc-justify-center cc-items-center box-bottom-title">AI智能制造</view>
			<view class="cc-flex cc-justify-center cc-items-center box-bottom-titleTwo">在AI的笔触下平凡的照片跃然成为梦幻的艺术篇章</view>
			<view class="cc-flex cc-justify-center cc-items-center box-bottom-button" @click="$navigateTo('/pages/custom/index')">
				<text>个性化AI定制</text>
			</view>
			<view class="cc-flex cc-justify-center cc-items-center box-bottom-buttonTwo" @click="navigateToWeixin">
				<text>直接打印</text>
			</view>
		</view>

		<u-popup :show="show" mode="bottom" :round="20" @close="close" @open="open">
			<view class="popup-content">
				<view class="popup-content-top">
					<!-- <view
            style="width: 150rpx; height: 150rpx; border: 1px solid black"
          ></view> -->
					<img style="width: 120rpx; height: 120rpx" src="https://ai.mojudianzisw.com/static/img/shop/ai/logo1.png" alt="" />
				</view>
				<view class="popup-content-title">
					<text style="font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF; font-weight: bold; font-size: 36rpx; color: #180000">欢迎来到AI智能制造小程序</text>
					<text style="font-size: 28rpx; color: rgba(24, 0, 0, 0.6); font-weight: 500">为了更好的服务，需要得到您的授权</text>
				</view>
				<view class="popup-content-button" @click="login">获取头像昵称</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import setMarginTop from '@/mixins/setMarginTop'; // 引入 mixin
import { loginAuth } from '@/api/index.js';
export default {
	mixins: [setMarginTop], // 使用 mixin
	data() {
		return {
			show: false
		};
	},
	onLoad() {
		console.log('token', uni.getStorageSync('token'));
		console.log('openId', uni.getStorageSync('openId'));
		if (uni.getStorageSync('token') && uni.getStorageSync('openId')) {
			this.show = false;
		} else {
			this.show = true;
		}
	},
	methods: {
		navigateToWeixin() {
			uni.navigateToMiniProgram({
				appId: 'wx629579ec2f3cb8d4', // 目标小程序的 appId
				path: 'pages/mall/machineDetail?machine_id=100179', // 目标小程序的页面路径
				extraData: {
					from: 'uniApp'
				},
				success(res) {
					console.log('成功跳转到目标小程序', res);
				},
				fail(err) {
					console.error('跳转失败', err);
				}
			});
		},
		open() {
			this.show = true;
			// console.log('open');
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		login() {
			uni.login({
				provider: 'weixin',
				onlyAuthorize: true, // 微信登录仅请求授权认证
				success: async (loginRes) => {
					console.log('loginRes', loginRes);
					// 获取用户信息
					wx.getUserInfo({
						success: function (res) {
							console.log('微信用户信息:', res.userInfo);
							uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
							uni.setStorageSync('nickName', res.userInfo.nickName);
						},
						fail: function (err) {
							console.error('获取用户信息失败', err);
						}
					});

					const { code } = loginRes;
					if (!code) {
						console.error('loginRes.code 是无效的:', code);
						return; // 如果 code 无效，退出处理
					}
					// okXFX7MsfzAj8eDE2i1TO3fVLuxo
					try {
						const response = await loginAuth({ code }); // 这里是你的异步请求
						console.log('response', response); // 返回 response
						if (response.code == 200) {
							uni.setStorageSync('token', response.info.token);
							uni.setStorageSync('openId', response.info.openId);
							this.show = false;
							uni.showToast({ title: '授权成功' });
						}
					} catch (error) {
						console.error('Request error', error);
						return null; // 如果请求出错，返回 null 或其他错误信息
					}
				},
				fail: (err) => {
					console.log(err);
					reject(err); // 登录授权失败，reject
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100%;
	&-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
}
.box-width {
	width: 200rpx;
	height: 100%;
}
.box-bottom {
	width: 100%;
	height: 460rpx;
	// background: #fafa;
	position: absolute;
	bottom: 4rpx;
	left: 0;
	z-index: 9;
	&-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #180000;
		text-transform: none;
		width: 100%;
		height: 75rpx;
	}
	&-titleTwo {
		font-size: 28rpx;
		font-weight: 400;
		color: #180000;
		text-transform: none;
		width: 100%;
		margin-top: 4rpx;
	}
	&-button {
		width: calc(100% - 64rpx);
		height: 88rpx;
		background: #f56364;
		border-radius: 72rpx;
		box-shadow: inset 0rpx 8rpx 12rpx 0rpx #ffafb0;
		color: #fff;
		margin-top: 80rpx;
		margin-left: 32rpx;
	}
	&-buttonTwo {
		width: calc(100% - 64rpx);
		height: 88rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
		color: #f56364;
		border-radius: 72rpx;
		border: 2rpx solid #f56364;
		text {
			font-size: 28rpx;
			font-weight: 500;
		}
	}
}

.view-history {
	position: absolute;
	margin-top: 320rpx;
	right: 0;
	width: 228rpx;
	height: 64rpx;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 48rpx 0 0 48rpx;
	border: 2rpx solid rgba(245, 99, 100, 1);
	// border-image: linear-gradient(94deg, rgba(245, 99, 100, 1), rgba(255, 255, 255, 0)) 2 2;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333333;
	font-size: 28rpx;
	font-weight: 400;
}

.popup-content {
	width: 100%;
	height: 520rpx;
	// border: 1px solid black;
	&-top {
		width: 100%;
		height: 250rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	&-title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
	}
	&-button {
		width: calc(100% - 64rpx);
		height: 88rpx;
		margin-left: 32rpx;
		box-shadow: inset 0rpx 8rpx 12rpx 0rpx #ffafb0;
		background: #f56364;
		border-radius: 72rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		font-weight: 500;
		font-size: 28rpx;
		margin-top: 44rpx;
	}
}
</style>
